<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>商户管理</cite></a>
        <a><cite>联调对接</cite></a>
    </div>
</div>
<style>
    .layui-form-label {
        width:20% !important;
        margin-left:1%;
    }
    .layui-input-inline {
        width: 33% !important;
    }
    .divResult {
        background: #0C0C0C;
        color: green;
        font-size: 14px;
        padding: 10px;
        margin: 20px;
        line-height: 25px;
        word-wrap: break-word;
        display: none;
    }
    xmp {
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
    }
</style>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief" lay-filter="mch">
            <ul class="layui-tab-title">
                <li class="layui-this">模拟回调</li>
                <li>订单日志</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-form layui-form-pane layui-tab-item layui-show" >
                        <input type="hidden" name="type" value="site" >
                        <div class="layui-form-item">
                            <label class="layui-form-label">订单号类型</label>
                            <div class="layui-input-inline">
                                <select id="notifyOrderType" name="notifyOrderType" lay-verify="required">
                                    <option value="1">支付订单号</option>
                                    <option value="2">商户订单号</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"><label style="color: red">* </label>订单号</label>
                            <div class="layui-input-inline">
                                <input type="text" autocomplete="off" lay-verify="required" class="layui-input" name="notifyOrderId" placeholder="请输入订单号">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">回调地址</label>
                            <div class="layui-input-inline">
                                <input type="text" autocomplete="off" class="layui-input" name="notifyUrl" placeholder="请输入回调地址,默认不填则为商户提交的回调地址">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <p style="margin-left: 10%">提示：该功能可模拟回调商户支付通知接口,不会修改支付订单状态。当回调同步响应为success时，认为回调成功。</p><br/>
                            <div class="layui-input-block" style="margin-left: 25%">
                                <button class="layui-btn" lay-submit lay-filter="manual">发起回调</button>
                            </div>
                        </div>
                        <div id="notifyResult" class="layui-form-item divResult" hidden="hidden"></div>
                </div>

                <div class="layui-form layui-form-pane layui-tab-item">
                    <input type="hidden" name="type" value="payOrderDetail" >
                    <div class="layui-form-item">
                        <label class="layui-form-label">订单号类型</label>
                        <div class="layui-input-inline">
                            <select id="orderType" name="orderType" lay-verify="required">
                                <option value="1">支付订单号</option>
                                <option value="2">商户订单号</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">订单号</label>
                            <div class="layui-input-inline">
                                <input type="text" autocomplete="off" class="layui-input" name="orderId" placeholder="请输入订单号">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <!--<p style="margin-left: 10%">提示：商户订单号仅查询下单失败订单。</p><br/>-->
                            <div class="layui-input-block" style="margin-left: 25%">
                                <button class="layui-btn" lay-submit lay-filter="payOrderDetail">查询</button>
                            </div>
                        </div>
                        <div id="payOrderDetail" class="layui-form-item divResult" hidden="hidden"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'laydate', 'element', 'admin'],function(){
        var form = layui.form
            , $ = layui.$
            , element = layui.element
            , laydate = layui.laydate
            , layer = layui.layer
            ,admin = layui.admin;

        element.render();

        form.on('submit(manual)', function(data) {
            if (data.field.notifyOrderId == "") {
                layer.msg("订单号不能为空！");
                return false;
            }
            var layerMsgId = layer.msg('正在发起回调... ',{time: 0, shade: 0.3});
            //提交表单
            admin.req({
                type: 'get',
                url: layui.setter.baseUrl + '/pay_order/manual',
                data: data.field,
                error: function (err) {
                    layer.close(layerMsgId);
                    layer.alert(err);
                },
                success: function (res) {
                    layer.close(layerMsgId);
                    console.log(res);
                    if(res.code == 0) {

                        var data = res.data;
                        $("#notifyResult").html(data.request
                            + "<br/>耗时：" + data.usedTime + " ms </br><xmp>返回结果：" + data.result + "</xmp><br/><xmp>回调地址："
                            + data.notifyUrl + "</xmp><br/><xmp>签名串：" + data.signStr + "</xmp><br/>签名值：" + data.sign);
                        $("#notifyResult").css("display", "block");
                    }else {
                        $("#notifyResult").html('');
                        $("#notifyResult").css("display", "none");
                    }
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        })

        form.on('submit(payOrderDetail)', function(data) {
            if (data.field.orderId == "") {
                layer.msg("订单号不能为空！");
                return false;
            }
            var layerMsgId = layer.msg('正在查询... ',{time: 0, shade: 0.3});
            //提交表单
            admin.req({
                type: 'get',
                url: layui.setter.baseUrl + '/pay_order_log/select',
                data: data.field,
                error: function (err) {
                    layer.close(layerMsgId);
                    layer.alert(err);
                },
                success: function (res) {
                    layer.close(layerMsgId);
                    var log = res.data;
                    if(res.code == 0) {
                        var html = "";
                        for(var i = 0;i<log.length;i++) {
                            var type = log[i].type == 1?'商户下单':log[i].type == 2?'通的请求':log[i].type == 3?'通道响应':log[i].type == 4?'下单响应':log[i].type == 5?'通道回调':log[i].type == 6?'回调响应':""
                            if (log[i].type == 1) {
                                var params = JSON.parse(log[i].content);
                                var param = JSON.stringify(JSON.parse(params.params), null, 4);
                                html += "<span style='color: white'><xmp>【"+type +"】</xmp></span>" + "<xmp> 商户系统请求数据：</xmp>"+"<xmp>" + param + "</xmp>" +
                                    "<xmp>我方系统签名串：</xmp>"+"<xmp>" + params.signStr + "</xmp>" +
                                    "<xmp>我方系统签名结果：</xmp>"+"<xmp>" + params.signValue + "</xmp>";
                            }
                            if (log[i].type == 4) {
                                var content = JSON.stringify(JSON.parse(log[i].content), null, 4);
                                html += "<span style='color: white'><xmp>【"+type +"】</xmp></span>" + "<xmp> 我方响应商户系统结果：</xmp>"+"<xmp>" + content + "</xmp>";
                            }
                        }
                        $("#payOrderDetail").html(html);
                        $("#payOrderDetail").css("display", "block");
                    }else {
                        $("#payOrderDetail").html('');
                        $("#payOrderDetail").css("display", "none");
                    }
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        })

        form.render();
    })
</script>